<template lang="jade">
    div
        div(class="modal fade",id="outboundModal",tabindex="-1",role="dialog",aria-labelledby="outboundModalLabel")
            div(class="modal-dialog",v-if="product",style="width:61.8%",v-loading="loading")
                div(class="modal-content")
                    div(class="modal-header")
                        h4 新建出库单
                    div(class="modal-body")
                        el-form(label-width="100px")
                            el-form-item(label="出库标题")
                                input(class="form-control",v-model="outboundOrder.title")
                            el-form-item(label="出库备注")
                                textarea(class="form-control",v-model="outboundOrder.remark")
                        div(class="outbound-order-detail-form")
                            table(class="table")
                                thead
                                    tr
                                        th(v-for="name in nameList") {{name.name}}
                                        th(style="width:100px") 销售价格
                                        th(style="width:100px") 当前库存
                                        th(style="width:100px") 出库数量
                                        th(style="width:100px") 备注
                                        th(style="width:50px") 
                                tbody
                                    tr(v-for="(sku,index) in outboundDetailList")
                                        td(v-for="propertyItem in sku.propertyItems") {{propertyItem.name}}
                                        td
                                            input(class="form-control",v-model="sku.price")
                                        td
                                            {{sku.productSkuTotal}}
                                        td
                                            input(class="form-control",v-model="sku.total")
                                        td
                                            input(class="form-control",v-model="sku.remark")
                                        td(style="width:100px") 
                                            a(class="text-danger",href="javascript:void(0);",@click="remvoe(index)")
                                                i(class="el-icon-delete") 
                    div(class="modal-footer")
                        button(type="button",class="btn btn-primary",@click="save_outbound_order") 确定出库
</template>
<script>
    import Product from '../models/product';
    import config from '../config/config';
    import OutboundOrder from '../models/outbound-order';
    import OutboundDetail from '../models/outbound-detail';
    import {request} from 'collection';

    export default {
        data(){
            return {
                typeList: [],
                outboundOrder: new OutboundOrder(),
                outboundDetailList: [],
                loading: false
            };
        },
        props: { 
            product: {type: Product, default: null},
            visible: {type: Boolean, default: false}
        },

        model:{prop:'product',event:'update'},

        watch: {
            'visible'(val){
                 $('#outboundModal').modal(val ? 'show': 'hide');
                 document.body.style.overflow = val ? 'hidden':'auto';
                 if(val) this.on_visible();
            }
        },

        computed:{
            nameList(){
                if(this.product.productSkuList.length==0)return [];
                var productSku = this.product.productSkuList[0];
                var  nameList =  _.map(productSku.propertyItems, (propertyItem)=> {
                    if(!propertyItem.property)return null;
                    return {
                            name:propertyItem.property.name,
                            id:  propertyItem.property.id
                        };
                });
                return _.filter(nameList, (name)=>{return name});
            }
        },

        methods:{
            save_outbound_order(){
                var vm = this;
                var params = {
                    order: this.outboundOrder,
                    details: this.outboundDetailList
                };
                request.post.call(this, config.apis.save_outbound_order, params).then((res)=>{
                     if(res.data.result.indexOf('F')===0) {
                        vm.$message({message:res.data.result,type:'error'});
                        return;
                    }
                     _.each(vm.product.productSkuList,(productSku)=>{
                        var match =_.find(vm.outboundDetailList,(detail)=>{ return detail.productSkuId== productSku.id});
                        if(match !=null) productSku.total =parseFloat(productSku.total) - parseFloat(match.total);
                    });
                    vm.$message({message:'出库成功',type:'success'});
                    vm.visible=false;
                    vm.$emit('update:visible',vm.visible);
                });
            },
            on_visible(){
                var checked = _.filter(this.product.skuList,function(sku){return sku.checked});
                var skuList = checked.length == 0 ? this.product.skuList : checked;

                this.outboundDetailList = _.map(this.product.productSkuList, function(sku){
                    var detail = new OutboundDetail();
                    detail.productSkuId = sku.id;
                    detail.price = sku.price;
                    detail.total = 1;
                    detail.productSkuTotal = sku.total;
                    detail.propertyItems = sku.propertyItems;   
                    return detail; 
                });
            },
            remvoe(index){
                this.outboundDetailList.splice(index,1);
            }
        },

        mounted(){
            var vm = this;
            $('#outboundModal').on('hidden.bs.modal', function (e) {
                vm.$emit('close');
            });
        }
    }
</script>
<style lang="scss">
    .outbound-order-detail-form{
        margin:0 -15px;
        border-top: 1px solid #eee;
        max-height: 200px;
        overflow-y: auto;
    }
    .outbound-order-detail-form table.table{
        margin-bottom:0px;
    }
    .outbound-order-detail-form table.table tr td,
    .outbound-order-detail-form table.table tr th{
        vertical-align: middle;
    }
    .outbound-order-detail-form table.table tr td:first-child,
    .outbound-order-detail-form table.table tr th:first-child{
        padding-left: 30px;
    }
</style>
 